import React, { useRef, useState, useEffect } from 'react';
import { View, Image, Text } from '@tarojs/components';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import "taro-ui/dist/style/components/icon.scss";
import './index.scss';

const CardDetaili = ({ }) => {
  const [info,setInfo] = useState({})
  const id = useRef('')
  
  useEffect(()=>{
    id.current = getCurrentInstance().router.params.orderId
    _initData({
      orderId:getCurrentInstance().router.params.orderId
    })
  },[])

  const _initData =data=>{
    let url = '/cinema-app/api/dx/card/rechargeOrder/detail'
    if(getCurrentInstance().router.params.type == '5') url = '/cinema-app/api/dx/card/openOrder/detail'
    if(getCurrentInstance().router.params.type == '8') url = `/wallet/paid/order/detail/${data.orderId}`
    Taro.$get(url,data).then(res=>{
      if(res.code == '1'){
        if(getCurrentInstance().router.params.type == '8'){
          const {content} = res
          setInfo({
            ...content,
            id: content.orderId,
            orderStatusDesc: content.status == '1'?'已完成':'',
            title:content.memberName,
            mainImageUrl:content.titleUrl,
            totalPrice:content.totalPayment,
            paymentTypeDesc:content.payTypeDesc,
            transId:content.tranId,
            created:content.createdDesc,
            paymentTime:content.paymentTimeDesc,
            finishTime:content.successTimeDesc
          })
          return;
        }
        setInfo(res.content)
      }
    })
  }
  return (
  <View className="activity-detail">
    {info.id?<>
    {info.orderStatusDesc?
    <View className='detail-status'>
      <Text className='at-icon at-icon-check-circle' style={{marginRight:'6px',fontSize:'20px'}}></Text> {info.orderStatusDesc}
    </View>:null}
    <View className="detail-header">
      <Image src={info.mainImageUrl} className='header-img' mode='aspectFill' />
      <View className="header-info">
        <View className="info-h2 omit-2">{info.title}</View>
        <View className="info-span">
          <View className="span-price"><Text style={{fontSize:'10px'}}>￥</Text>{info.totalPrice}</View>
        </View>
      </View>
    </View>
    <View className="detail-intro">
      <View className="intro-list"><View className='p'>订单编号</View> {info.id} <Text className='span' style={{color: '#90989F',margin: '0 6px'}}>|</Text> <Text className='span' onClick={()=>{
        Taro.setClipboardData({
          data:info.id,
          success: () => {
            Taro.showToast({
              title:'复制成功',
              icon:'success'
            })
          }
        })}}>复制</Text></View>
        <View className="intro-list">
          <View className='p'>支付方式</View>
          {info.paymentTypeDesc}
        </View>
        {info.transId?
        <View className="intro-list">
          <View className='p'>支付流水号</View> 
          {info.transId}
        </View>:null}
        <View className="intro-list">
          <View className='p'>创建时间</View> 
          {info.created}
        </View>
        {info.paymentTime?
        <View className="intro-list">
          <View className='p'>付款时间</View>
          {info.paymentTime}
        </View>:null}
        {info.finishTime?
        <View className="intro-list">
          <View className='p'>完成时间</View>
          {info.finishTime}
        </View>:null}
    </View>
    </>:null}
  </View>
  );
};

export default CardDetaili